<template>
	<view id='tagAllModal'>
		<view class='tag-modal' :class='{show:show}' :style='{top: top + "px"}' @click='handleClose'>
			<view class="modal" @click.stop>
				<view class="list-box">
					<view @click="handleActive(item,index)" :style="ids.includes(item.id)?'background:#fff1ad;':''" class="list-item" v-for="(item,index) in list" :key="index">
						<view class="left">
							<image src="../../../../../static/service/server.png" mode=""></image>
							<view class="text-cut">
								{{item.name}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			list: Array,
			activeList:Array,
		},
		data() {
			return {
				show: false,
				top: 0,
				ids:[],
			}
		},
		watch:{
			activeList: {
				handler(val) {
					this.ids = val.map(item=>item.id)
				},
				deep: true,
				immediate: true,
			},
		},
		mounted() {
			let that = this;
			const query = uni.createSelectorQuery().in(this);
			query
			  .select("#tagAllModal")
			  .boundingClientRect((data) => {
				  console.log(data)
			     that.top = data.top
			  })
			  .exec();
		},
		methods: {
			handleOpen() {
				this.show = true;
			},
			handleClose() {
				this.show = false;
			},
			handleActive(item,index){
				this.$emit('changeSearch',item,index)
			}
		}
	}
</script>

<style scoped lang="scss">
	.tag-modal {
		width: 100%;
		height: 100vh;
		background-color: rgba(0,0,0,0.5);
		position: fixed;
		left: 0;
		z-index: 999999999;
		display: none;
		
		&.show {
			display: block;
		}
		
		.modal {
			width: 100%;
			background: #FFFFFF;
			border-radius: 0rpx 0rpx 32rpx 32rpx;
			max-height: 350rpx;
			overflow: auto;
			.list-box{
				width: 100%;
				.list-item{
					height: 122rpx;
					padding: 0 32rpx;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1rpx solid #f7f7f7;
					.left{
						display: flex;
						align-items: center;
						image{
							margin-right: 16rpx;
							width: 26rpx;
							height: 26rpx;
						}
						view{
							font-family: PingFangSC, PingFang SC;
							font-weight: 500;
							font-size: 30rpx;
							color: var(--h1Color);
							line-height: 42rpx;
							text-align: left;
							font-style: normal;
							flex: 1;
						}
					}
					.right{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #FF2626;
						line-height: 33rpx;
						text-align: center;
						font-style: normal;
					}
				}
			}
			
		
		
		
		}
	}
</style>